import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

class ImgScreen extends StatefulWidget {
  const ImgScreen({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _State();
}

class _State extends State<ImgScreen> {
  var _i = 0;

  @override
  Widget build(BuildContext context) => DefaultTabController(
        length: 4,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(text: 'Network'),
                Tab(text: 'Asset'),
                Tab(text: 'Data URI'),
                Tab(text: 'SVG'),
              ],
            ),
            title: const Text('ImgScreen'),
          ),
          body: TabBarView(
            children: <Widget>[
              _buildHtmlWidget(_htmlNetwork()),
              _buildHtmlWidget(_htmlAsset()),
              _buildHtmlWidget(_htmlDataUri()),
              _buildHtmlWidget(_htmlSvg()),
            ],
          ),
        ),
      );

  Widget _buildHtmlWidget(String html) => SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: HtmlWidget(
            '$html<hr /><pre>${const HtmlEscape().convert(html)}</pre>',
          ),
        ),
      );

  String _htmlAsset() {
    const icon = 'asset:logos/icon.png';

    return '''
<img src="$icon" />
<img src="$icon" width="48" height="48" />
<img src="$icon" width="12" height="12" />
''';
  }

  String _htmlDataUri() {
    const icon144 =
        '';

    return '''
<img src="$icon144" />
<img width="48" height="48" src="$icon144" />
<img width="12" height="12" src="$icon144" />
''';
  }

  String _htmlNetwork() => '''
<p>
  Inline:
  <img alt="alt" />
  <img title="title" />
  <img src="${_src(20, 10)}" width="20" height="10" />
  <img src="${_src(30, 10)}" width="30" height="10" />
  <img src="${_src(40, 10)}" width="40" height="10" />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis iaculis felis, quis interdum massa. Maecenas dolor risus, semper id metus nec, rhoncus condimentum nulla.
</p>

<p>
  Inline (without dimensions):
  <img src="${_src(20, 10)}" />
  <img src="${_src(30, 10)}" />
  <img src="${_src(40, 10)}" />
  Sed nec dolor massa. Pellentesque tristique, mauris bibendum commodo sollicitudin, erat urna mattis nunc, et faucibus tortor justo vel ante.
</p>

<p>
  Inline (many images):
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  <img src="${_src(50, 10)}" width="50" height="10" />
  Nulla nec lorem in nisl vehicula tincidunt. Nam sagittis, quam sed imperdiet interdum, tellus justo facilisis risus, non vehicula eros eros eu magna.
</p>

<p>
  Block (small image):
  <img src="${_src(100, 10)}" width="100" height="10" style="display: block" />
</p>

<p>
  Block (small image, without dimensions):
  <img src="${_src(100, 10)}" style="display: block" />
</p>

<p>
  Block (big image):
  <img src="${_src(2000, 200)}" width="2000" height="200" style="display: block" />
</p>

<p>
  Block (big image, without dimensions):
  <img src="${_src(2000, 200)}" style="display: block" />
</p>

<p>
  Link:
  <a href="https://placeholder.com"><img src="${_src(50, 10)}" /></a>
</p>

<p>
  Images from <a href="https://placeholder.com">placeholder.com</a>,
  filler text from <a href="https://lipsum.com/feed/html">lipsum.com</a>
</p>
''';

  String _htmlSvg() {
    const network =
        'https://raw.githubusercontent.com/daohoangson/flutter_widget_from_html/0000998/demo_app/logos/icon.svg';
    const asset = 'asset:test/images/icon.svg?package=fwfh_svg';
    const dataUri =
        '';

    return '''
<p>
  Network:

  <img src="$network" />
  <img src="$network" width="48" />
  <img src="$network" width="12" />
</p>

<p>
  Asset:

  <img src="$asset" />
  <img src="$asset" width="48" />
  <img src="$asset" width="12" />
</p>

<p>
  Data URI:

  <img src="$dataUri" />
  <img src="$dataUri" width="48" />
  <img src="$dataUri" width="12" />
</p>
''';
  }

  String _src(int width, int height) =>
      'https://via.placeholder.com/${width}x$height'
      '?cacheBuster=${DateTime.now().millisecondsSinceEpoch}-${_i++}';
}
